<template>
  <div class="hello">
    <div>
      <h1>切换皮肤颜色：</h1>
      <el-switch
        v-model="isDark"
        :active-icon="Moon"
        :inactive-icon="Sunny"
        inline-prompt
        @change="toggleDark"
      />
    </div>
    <div v-if="isDark">
      <el-button type="primary" @click="changeBgc('rgb(8, 8, 8)')"
        >黑</el-button
      >
      <el-button
        type="danger"
        @click="changeBgc('rgb(193, 44, 31)')"
        :disabled="!isDark"
        >赤</el-button
      >
      <el-button @click="changeBgc('rgb(250, 192, 61)')" :disabled="!isDark"
        >橙</el-button
      >
      <el-button
        @click="changeBgc('rgb(255, 238, 111)')"
        type="primary"
        :disabled="!isDark"
        >黄</el-button
      >

      <el-button type="warning" @click="changeBgc('rgb(79, 111, 70)')"
        >绿</el-button
      >
      <el-button type="success" @click="changeBgc('#6ca8af')">青</el-button>
      <el-button type="info" @click="changeBgc('#4994c4')">蓝</el-button>
      <el-button type="warning" @click="changeBgc('rgb(66, 34, 86)')"
        >紫</el-button
      >
    </div>
  </div>
</template>
   
  <script setup>
import { Sunny, Moon } from "@element-plus/icons-vue";
import { useDark, useToggle } from "@vueuse/core";

const isDark = useDark(); //收集开关的数据

const toggleDark = useToggle(isDark);

//switch开关的chang事件进行暗黑模式的切换
const changeBgc = (bgc) => {
  let domStyle = document.documentElement.style;
  domStyle.setProperty("--zyl-bg-color", bgc);
};
</script>
   
  <style scoped>
</style>